<template>
	<view>
		<view class="page flex-col" id="memberBusiness">
		    <view class="block_1">
		<!--        <view class="nav-bar_1 flex-row">-->
		<!--&lt;!&ndash;            <view @click="back"><image style="width:0.3rem;height:0.45rem;margin-left: -3.2rem" src="${request.contextPath}/statics/js/modules/h5/image/memberBusinessBack.png"/></view>&ndash;&gt;-->
		<!--            <view class="text_2" style="width:100%;padding-top: 0.45rem">VIP会员产品包</view>-->
		<!--        </view>-->
		        <view style="display: flex;justify-content: center;">
		            <view class="box_2 flex-row" >
		                <view class="image-text_1 flex-row justify-between">
		                    <view style="padding-left: 0.44rem"  v-if="currentUser.portrait" ><image style="border-radius:50%" class="single-avatar_1" :src="currentUser.portrait" alt=""/></view>
		                    <view  style="padding-left: 0.44rem"  v-else><image class="single-avatar_1" src="/static/image/wutouxiang.png" alt=""/></view>
		                    <view class="group_1 flex-col">
		                        <view class="text-group_1" style="overflow: hidden;text-overflow: ellipsis;">{{currentUser.userName}}</view>
		                        <view class="flex-row" style="padding-top:10rpx">
		                            <view class="tag_1" style="align-items: center; ">
		                                <view class="image-text_2 flex-row justify-between" style="align-items: center;">
		                                    <image
		                                    class="icon_1"
		                                    referrerpolicy="no-referrer"
		                                    src="https://m.nocexpo.com/statics/js/modules/h5/img/red_position.png"
		                                    />
		                                    <view class="text-group_2" style="overflow: hidden;text-overflow: ellipsis;">{{currentUser.position}}</view>
		                                </view>
		                            </view>
		                            <view class="tag_2" style=" align-items: center; ">
		                                <view class="image-text_7 flex-row justify-between" style="align-items: center;">
		                                    <image
		                                    class="icon_2"
		                                    referrerpolicy="no-referrer"
		                                    src="https://m.nocexpo.com/statics/js/modules/h5/img/redcompany.png"
		                                    />
		                                    <view class="text-group_3" style="overflow: hidden;text-overflow: ellipsis;align-items: center">{{currentUser.company}}</view>
		                                </view>
		                            </view>
		                        </view>
		                    </view>
		                </view>
		                <view class="tag_3 flex-col">
		                    <view v-if="currentUser.remainDays == null" class="text-wrapper_1">
		                        <view class="text_3">剩余VIP需求条数：</view>
		                        <view class="text_4">{{currentUser.remainNumber}}</view>
		                    </view>
							<view v-else class="text-wrapper_1">
							    <view class="text_3">剩余</view>
							    <view class="text_4">{{currentUser.remainDays}}</view>
								<view class="text_3">天</view>
							</view>
		                    <view class="" style="display: flex;">
								 <view class="text_5 button_1" @click="toMemberDemandDetail()">详情</view>
		                        <view class="text_5 button_1" @click="back">返回</view>
		                    </view>
		                </view>
		            </view>
		        </view>
		    </view>
		    <view class="block_2 flex-col">
		        <view class="text_6">VIP会员产品包</view>
		        <view class="grid_1 flex-row">
		            <view class="section_2 flex-col" v-for="(item,index) in userMemberConfigs"    :key="index" :class="{section_4:selected == index}"  @click="selectedMark(index)">
		                <view class="flex-col" :class="[item.ifBuyOfUser == 0 ?'tag_4' : item.ifOnce == 2 ? 'tag_9' : item.ifOnce == 0 ? 'tag_10':'tag_8']">
		                    <view v-if="item.ifOnce == 1"  :class="[ item.ifBuyOfUser == 0 ? 'text_12' : 'text_7' ]">限购一次</view>
		                    <view v-else-if="item.ifOnce == 2"  :class="[ item.ifBuyOfUser == 0 ? 'text_12' : 'text_7' ]">限时购 剩 {{item.limitDays + 1}} 天</view>
		                    <view v-else  :class="[ item.ifBuyOfUser == 0 ? 'text_12' : 'text_7' ]"></view>
		                </view>
		                <view class="image-text_37 flex-row justify-between">
		                    <view v-if="item.remark != null && item.remark != ''"  :class="[ item.ifBuyOfUser == 0 ? 'text_8' : 'text_13' ]">{{item.remark}}
		                        <image v-show="item.detail != null && item.detail != ''" @click="demandHint(index)"
		                             class="icon_6"
		                             referrerpolicy="no-referrer"
		                             src="https://m.nocexpo.com/statics/js/modules/h5/img/demand_hint.png"
		                        />
		                    </view>
		                    <view v-else  :class="[ item.ifBuyOfUser == 0 ? 'text_8' : 'text_13' ]">VIP需求条数
		                        <image v-show="item.detail != null && item.detail != ''" @click="demandHint(index)"
		                             class="icon_6"
		                             referrerpolicy="no-referrer"
		                             src="https://m.nocexpo.com/statics/js/modules/h5/img/demand_hint.png"
		                        />
		                    </view>
		                </view>
		                <view v-if="item.type == 2" class="tag_5 flex-col" :class="{tag_11:selected == index}" ><view :class="[item.ifBuyOfUser == 0 ? 'text_9' : '',selected == index ? 'text_24' : '',item.ifBuyOfUser == 1 && selected != index ? 'text_14' : '']">{{item.demandNumber}}条</view></view>
						<view v-else class="tag_5 flex-col" :class="{tag_11:selected == index}" ><view :class="[item.ifBuyOfUser == 0 ? 'text_9' : '',selected == index ? 'text_24' : '',item.ifBuyOfUser == 1 && selected != index ? 'text_14' : '']">有效期{{item.months / 12}}年</view></view>
		                <view class="text-wrapper_2">
		                    <view  :class="[ item.ifBuyOfUser == 0 ? 'text_10' : 'text_15' ]">￥</view>
		                    <view  :class="[ item.ifBuyOfUser == 0 ? 'text_11' : 'text_16' ]">{{item.amount}}</view>
		                    <view v-show="item.originalAmount != '' && item.originalAmount != null " class="text_18"><s>￥{{item.originalAmount}}</s></view>
		                </view>
		            </view>
<!--		            <view class="section_6 flex-col">-->
<!--		                <view class="text_34">敬请期待</view>-->
<!--		                <view class="text-wrapper_8">-->
<!--		                  <view class="text_36">￥</view> <view class="text_37">50000</view>-->
<!--		               </view>-->
<!--	          </view>-->
		        </view>
		        <view  @click="purchase" class="button_2 flex-col">
		            <view class="text_38">立即购买</view>
		        </view>
		        <view class="text-wrapper_9">
		            <view class="text_39">温馨提示：</view>
		            <view class="paragraph_1">
						<view/>
							<view>购买成功即可获取会员“VIP”需求，剩余条数为0时无法获取“VIP”需求。</view>
							<view>1. 使用时间：无年限，用完为止。</view>
							<view>2. 体验包每个账户“限购一次"，其他产品包“无限购次数”。</view>
							<view>3. 成功获取VIP需求后，扣除1条VIP条数。(未匹配成功/匹配成功超48小时未联系，系统取消不扣VIP条数)</view>
							<view style="display: flex;">
								4.开发票，请点击
								<view class="text_40" onclick="window.location.href = 'https://work.weixin.qq.com/kfid/kfc50f92f46e425dade'">【客服】</view>
								联系
							</view>
						</view>
		            
		            <!--规则弹窗-->
		            <view v-show="detailShow" class="block_6 flex-col">
		                <view style="position: fixed;top: 300rpx;left: 100rpx; width: 550rpx; height: 600rpx; background: linear-gradient(180deg, #E2F9F9 0%, #FFFFFF 100%);border-radius: 50rpx;" class="group_2 flex-col">
		                    <view class="block_7 flex-col"></view>
		                    <view class="paragraph_2" v-html="nowDetail">
		<!--                        温馨提示：<br />购买会员产品包即可成为“云展会员”获取“VIP需求”，剩余VIP需求条数为0时会员失效并且无法获取“VIP需求”。<br />1.“限购一次”的会员产品包只能购买一次，其余产品包不限制购买次数。<br />2.成功获取VIP需求后，扣除一条剩余VIP需求条数。未匹配成功则不扣除<br />注：成功获取需求48小时后未联系，则取消联系资格，扣除的VIP条数不会归还<br />3.开发票，请点击联系【客服】-->
		                    </view>
		                    <view class="text_41" >产品包详情</view>
		                </view>
		                <image @click="detailClose" style="position:fixed;top: 1000rpx;left:360rpx;width: 60rpx;height: 60rpx;" src="https://m.nocexpo.com/statics/js/modules/h5/img/close_detail.png"/>
		
		            </view>
		
		            <!--二维码弹窗-->
		<!--            <view v-if="showQRCode" style="display: flex;position:fixed;align-items: center;flex-direction: column;z-index:99999;top:2.5rem;left:10%;">-->
		<!--                <view style="width: 8rem;height: auto;background-color: #0686a3;border-radius:20px;display: flex;flex-direction: column;justify-content: center;align-items:center">-->
		<!--                    <view style="margin-top:0.5rem;margin-bottom:0.5rem;width: 5rem;background-color: #0686a3;display: flex;justify-content: center">-->
		<!--                    </view>-->
		<!--                    <view style="background-image:url('/statics/js/modules/h5/image/qrcode_background.png');background-size:100% 100%;height: 8.1rem;width: 6.5rem;;border-radius:16px;display: flex;flex-direction: column;align-items:center">-->
		<!--                        <view style="margin-top:0.5rem;color:#0686a3;font-size: 14px;font-weight: 600">客服二维码</view>-->
		<!--                        <view style="margin-top:0.3rem;margin-bottom:0.3rem;width:5rem;border-top:1px dashed #0686a3;height: 1px;overflow:hidden"></view>-->
		<!--                        <image style="width:6rem;" src="/statics/js/modules/h5/image/demandServiceQR.png"/>-->
		<!--                    </view>-->
		<!--                    <view style="margin-top:0.2rem;width: 6.5rem;height: 1.5rem;background-color: #0686a3;display: flex;justify-content: center">-->
		<!--                    </view>-->
		<!--                </view>-->
		<!--                <view style="width: 100%;display: flex;justify-content: center;margin-top: 0.5rem">-->
		<!--                        <image @click="showQRCode = false" style="width: 1rem;height: 1rem;" src="${request.contextPath}/statics/js/modules/h5/image/closeDemandQR.png"/>-->
		<!--                </view>-->
		<!--            </view>-->
		
		
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
import memberApi from '@/api/memberDemand.js';
import commonApi from '@/utils/commonMethod.js';
export default {
	data() {
		return {
			currentUser: {},
			collectionCount: '',
			browseCount: '',
			infinite_page: {currentPage: 1, totalPage: '', productList: [], limit: '10'},
			userMemberConfigs:[],
			disabled:false,
			loading: true,
			noMore: false,
			noData: false,
			search: {
				totalPage:'',
				page: 1,
				limit: 20,
				lastpage: 0
			},
			userMemberConfig:'',
			showPay:false,
			rechargeMoney:'',
			selected : -1,
			detailShow : false,
			nowDetail : '',
			showQRCode : false,
			
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径
		}
	},
	async created(){
    const pages = await getCurrentPages()
    const currentPage =pages[pages.length - 1]
    this.currentUrl = currentPage.$page.fullPath
		//获取当前用户
		const currentPromise = await commonApi.currentUserAxios()
		this.currentUser = currentPromise.data.session_user_h5
		console.log(this.currentUser)
		await this.getUserMemberConfig()
    if(this.currentUser.type == 1 && this.currentUser.state == 1){

    }else if(this.currentUser.type == 2){
      //跳转到首页
      uni.switchTab({
        url: '/pages/tabBar/index/index'
      })
    }else{
      //跳转到登录页面
      uni.redirectTo({
        url: '/pages/account/login/login?url='+ this.currentUrl,
      })

    }
	},
	onShow(){
		
		setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}
			
		}, 100);
	},
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	mounted() {
		//获取我产品
		//无限滚动
		// $(window).scroll(function () {
		// 	let scrollTop = $(this).scrollTop()
		// 	let windowHeight = $(this).height()
		// 	let scrollHeight = $(document).height()
		// 	if (scrollTop + windowHeight > scrollHeight - 1) {
		// 		this.getUserMemberConfig()
		// 	}
		// })

	},
	
	methods: {
		saveFootPrint(stayTime){
			commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"VIP会员产品包")
			
		},
		toMemberDemandDetail(){
			uni.navigateTo({
				url:'/pages/person/myMemberDemandDetail'
			})
		},
		back() {
			uni.switchTab({
				url:'/pages/tabBar/personal/personal'
			})
			// window.location.href = baseURL + "h5/my2.html"
		},
		detailClose(){
			this.detailShow = false
		},
		demandHint(index) {
			this.detailShow = true;
			this.nowDetail = decodeURIComponent(this.userMemberConfigs[index].detail);
		},

		selectedMark(index){
			if(this.userMemberConfigs[index].ifBuyOfUser == 0){
				uni.showModal({
					title: "",
					content: "该需求不可重复购买",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				this.selected = -1
				return;
			}
			if(this.selected == index){
				this.selected  = -1
			}else{
				this.selected = index
				// if(this.userMemberConfigs[index].detail){
				//     this.detailShow = true;
				//     this.nowDetail = decodeURIComponent(this.userMemberConfigs[index].detail);
				// }
			}


			// if(this.userMemberConfigs[index].detail){
			//     this.detailShow = true;
			//     this.nowDetail = decodeURIComponent(this.userMemberConfigs[index].detail);
			// }


			//选中
			// if(item.section_4){
			//     item.section_4 = !item.section_4;
			// }else{
			//     item.section_4 = true;
			// }
			this.$forceUpdate()
		},
		getUserMemberConfig(){
			memberApi.getUserMemberConfig(this.search.page,this.search.limit,this.currentUser.id).then( res =>{
				this.userMemberConfigs = res.data.list
			})
		},
		buyMemberOrDemand(item){
			// if(item.type == 2 && this.currentUser.ifMember == 0){
			//     alert("请先购买会员资格")
			//     return;	
			// }
			// if(item.type == 1 && this.currentUser.ifMember == 1){
			//     alert("您已是会员，请选择需求购买")
			//     return;
			// }
			this.showPay = true
			this.rechargeMoney = item.amount
			console.log(item)
		},
    purchase(){
			if(!(this.currentUser.type = 1 && this.currentUser.state == 1)){
				uni.showModal({
					title: "",
					content: "仅限云展供应商购买需求产品包",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			if(this.selected == -1){
				uni.showModal({
					title: "",
					content: "请选择需求包后再购买",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}

      console.log(this.currentUser)
      let that = this;
      // 仅作为参考，具体实现方法应与你们后端去沟通
      uni.login({
        provider: 'weixin', //使用微信登录获取code
        success: function (loginRes) {
          console.log(that.currentUser)
          //使用微信code获取openid
          commonApi.getOpenId(loginRes.code).then(res => {
            let openid = res.data.openid;
            let userInfo = {
              id: that.currentUser.id,
              openId: openid
            }
            commonApi.buyVip(userInfo,that.userMemberConfigs[that.selected].amount, that.userMemberConfigs[that.selected]).then(res => {
              //调起微信支付
              uni.requestPayment({
                provider: 'wxpay',
                timeStamp: res.data.map.timeStamp,// 时间戳（单位：秒）
                nonceStr: res.data.map.nonceStr,// 随机字符串
                package: res.data.map.package,// 统一下单接口返回的 prepay_id 参数值
                signType: res.data.map.signType,// 签名算法，应与后台下单时的值一致
                paySign: res.data.map.paySign,// 签名
                success(res) {
                  //支付成功
                  // 跳转到我的页面
                  uni.switchTab({
                    url:'/pages/tabBar/personal/personal'
                  })
                },
                fail(err) {
                  //支付失败、用户取消支付
				  uni.switchTab({
				    url:'/pages/tabBar/personal/personal'
				  })
                }
              });
            })
          });
        }
      });

		},

	}
}
	
</script>

<style>
	input {
		background-color: transparent;
		border: 0;
	}
	button {
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		outline: none;
		background-color: transparent;
	}

	button:active {
		opacity: 0.6;
	}
	.flex-col {
		display: flex;
		flex-direction: column;
	}
	.flex-row {
		display: flex;
		flex-direction: row;
	}
	.justify-start {
		display: flex;
		justify-content: flex-start;
	}
	.justify-center {
		display: flex;
		justify-content: center;
	}

	.justify-end {
		display: flex;
		justify-content: flex-end;
	}
	.justify-evenly {
		display: flex;
		justify-content: space-evenly;
	}
	.justify-around {
		display: flex;
		justify-content: space-around;
	}
	.justify-between {
		display: flex;
		justify-content: center;
	}
	.align-start {
		display: flex;
		align-items: flex-start;
	}
	.align-center {
		display: flex;
		align-items: center;
	}
	.align-end {
		display: flex;
		align-items: flex-end;
	}
	.page {
	    background-color: rgba(255, 255, 255, 1);
	    position: relative;
	    width: 100%;
	    /*height: 988px;*/
	    height:auto;
	    overflow: hidden;
	}
	
	.block_1 {
	    position: relative;
	    overflow: hidden;
	    background: url(https://m.nocexpo.com/statics/js/modules/h5/img/memberback.png)
	    100% no-repeat;
	    max-width:100%;
	    background-size: 100% 100%;
	    height:210rpx;
	}
	
	.box_1 {
	    margin: 0 0.35rem 0 29px;
	}
	
	.text_1 {
	    overflow-wrap: break-word;
	    color: rgba(255, 255, 255, 1);
	    font-size: 15px;
	    letter-spacing: -0.30000001192092896px;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 21px;
	}
	
	.thumbnail_1 {
	    width: 17px;
	    height: 0.3rem;
	    margin: 5px 0 5px 237px;
	}
	
	.thumbnail_2 {
	    width: 15px;
	    height: 0.3rem;
	    margin: 4px 0 6px 5px;
	}
	
	.image_1 {
	    width: 25px;
	    height: 0.3rem;
	    margin: 4px 0 5px 5px;
	}
	
	.nav-bar_1 {
	    /*margin-top: 1.25rem;*/
	    /*padding: 0.3rem 0rem 0rem 3.8rem;*/
	}
	
	.text_2 {
	    overflow-wrap: break-word;
	    color: rgba(255, 255, 255, 1);
	    font-size: 0.45rem;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 0.625rem;
	}
	
	.box_2 {
	    background-image: url(https://m.nocexpo.com/statics/js/modules/h5/img/demand_user_card.png);
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	    border-radius: 17rpx 17rpx 0 0;
	    position: absolute;
	    /*left: 0.5rem;*/
	    bottom: 0rpx;
	    /*width: 9rem;*/
	    height: 178rpx;
	    justify-content: flex-center;
	}
	
	.image-text_1 {
	    width: 470rpx;
	    padding-top: 35rpx;
	}
	

	
	.group_1 {
	    /*margin: 0.12rem 0.74rem 0 0;*/
	    padding: 0.1rem 0 0 0.3rem
	}
	
	
	.tag_1 {
	    background-color: rgba(255, 255, 255, 0.3196);
	    border-radius: 20rpx;
	    position: relative;
	    border: 4rpx solid rgba(168, 47, 37, 0.47);
	
	}
	
	/*.image-text_7*/
	
	.icon_1 {
	    width: 20rpx;
	    height: 20rpx;
	    /* margin: 14rpx 0 14rpx 0; */
	}
	.icon_6 {
	    width: 25rpx;
	    height: 25rpx;
	    margin: 5rpx 0 0 0;
	}
	.image-text_37 {
	    width: 310rpx;
	    /*margin: 0.1rem 0 0 0;*/
	}
	
	.text-group_2 {
	    overflow-wrap: break-word;
	    color: rgba(168, 47, 37, 1);
	    font-size: 20rpx;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: left;
	    white-space: nowrap;
	    padding-bottom: 4rpx;
	    padding-right: 10rpx;
	    /*line-height: 0.35rem;*/
	}
	
	.image-text_3 {
	    position: absolute;
	    left: 5px;
	    top: 0.02rem;
	    width: 34px;
	    height: 0.35rem;
	}
	
	
	.image-text_4 {
	    position: absolute;
	    left: 5px;
	    top: 0.02rem;
	    width: 34px;
	    height: 0.35rem;
	}
	
	
	.image-text_5 {
	    position: absolute;
	    left: 5px;
	    top: 0.02rem;
	    width: 34px;
	    height: 0.35rem;
	}
	
	
	.image-text_6 {
	    position: absolute;
	    left: 5px;
	    top: 0.02rem;
	    width: 34px;
	    height: 0.35rem;
	}
	
	
	.tag_2 {
	    background-color: rgba(255, 255, 255, 0.3196);
	    border-radius: 20rpx;
	    position: relative;
	    border: 4rpx solid rgba(168, 47, 37, 0.47);
	    margin: 0 0 0 14rpx;
	    padding: 0 10rpx 0 10rpx;
	}
	
	/*.image-text_7 {*/
	/*    width: 2.4rem;*/
	/*}*/
	
	.icon_2 {
	    width: 20rpx;
	    height: 20rpx;
	}
	
	.image-text_8 {
	    position: absolute;
	    left: 5px;
	    top: 0.02rem;
	    width: 74px;
	    height: 0.35rem;
	}
	
	.text-group_3 {
	    overflow-wrap: break-word;
	    color: rgba(168, 47, 37, 1);
	    font-size: 20rpx;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: left;
	    white-space: nowrap;
	    /*line-height: 0.35rem;*/
	}
	
	.tag_3 {
	    background-color: rgba(255, 242, 199, 1);
	    border-radius: 0 20rpx 0 20rpx;
	    margin: 0 0 130rpx 0;
	    padding: 4rpx 0 4rpx 0;
	}
	
	.text-wrapper_1 {
	    /*width: 3.625rem;*/
		display: flex;
	    height: 40rpx;
	    overflow-wrap: break-word;
	    font-size: 0;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 40rpx;
		justify-content: center;
	}
	
	.text_3 {
	    overflow-wrap: break-word;
	    color: rgba(46, 45, 45, 1);
	    font-size: 20rpx;
	    font-family: PingFangSC-Medium;
	    font-weight: 700;
	    text-align: left;
	    white-space: nowrap;
	    line-height: 40rpx;
	}
	
	.text_4 {
	    overflow-wrap: break-word;
	    color: rgba(227, 59, 59, 1);
	    font-size: 20rpx;
	    font-family: PingFangSC-Medium;
	    font-weight: 700;
	    text-align: left;
	    white-space: nowrap;
	    line-height: 40rpx;
	}
	
	.button_1 {
	    box-shadow: inset 0 -14rpx 14rpx 0 rgba(255, 255, 255, 0.5);
	    background-image: linear-gradient(
	            90deg,
	            rgba(255, 237, 225, 1) 0,
	            rgba(255, 255, 255, 0.2) 100%
	    );
	    border-radius: 25rpx;
	    margin: 20rpx 14rpx 0 22rpx;
	    padding: 3rpx 25rpx 0 25rpx;
	    height: 40rpx
	}
	
	.text_5 {
	    overflow-wrap: break-word;
	    color: rgba(92, 92, 92, 1);
	    font-size: 20rpx;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: left;
	    white-space: nowrap;
	    line-height: 40rpx;
	
	}
	
	.image-text_9 {
	    position: absolute;
	    left: 15px;
	    top: 0.4rem;
	    width: 3.625rem;
	    height: 56px;
	}
	
	.single-avatar_1 {
	    width: 90rpx;
	    height: 90rpx;
	}
	
	.box_3 {
	    margin: 6px 0 6px 0;
	}
	
	.text-group_1 {
	    overflow-wrap: break-word;
	    color: rgba(168, 47, 37, 1);
	    font-size: 30rpx;
	    font-family: PingFangSC-Medium;
	    font-weight: 700;
	    text-align: left;
	    white-space: nowrap;
	    line-height: 40rpx;
	    /*margin-right:-1rem;*/
	}
	
	.image-text_10 {
	    width: 34px;
	}
	
	
	.image-text_11 {
	    position: absolute;
	    left: 5px;
	    top: 0.02rem;
	    width: 34px;
	    height: 0.35rem;
	}
	
	.image-text_12 {
	    position: absolute;
	    left: 5px;
	    top: 0.02rem;
	    width: 34px;
	    height: 0.35rem;
	}
	
	.image-text_13 {
	    position: absolute;
	    left: 5px;
	    top: 0.02rem;
	    width: 34px;
	    height: 0.35rem;
	}
	
	.image-text_14 {
	    position: absolute;
	    left: 5px;
	    top: 0.02rem;
	    width: 34px;
	    height: 0.35rem;
	}
	
	.block_2 {
	    padding: 37rpx 17rpx 45rpx 20rpx;
	}
	
	.text_6 {
	    overflow-wrap: break-word;
	    color: rgba(46, 45, 45, 1);
	    font-size: 30rpx;
	    font-family: PingFangSC-Medium;
	    font-weight: 700;
	    text-align: left;
	    white-space: nowrap;
	    line-height: 40rpx;
	    margin: 0 400rpx 0 10rpx;
	}
	
	.grid_1 {
	    width: 100%;
	    /*height: 426px;*/
	    heght:auto;
	    flex-wrap: wrap;
	    margin: 20rpx 0 0 0;
	}
	
	.section_1 {
	    background-color: rgba(247, 247, 247, 1);
	    border-radius: 6px;
	    width: 166px;
	    height: 134px;
	    border: 0.02rem solid rgba(238, 238, 238, 1);
	    /*margin: 0 6px 0.3rem 6px;*/
	    margin: 0 3px 0.3rem 3px;
	    padding: 0 33px 24px 0;
	}
	
	.tag_4 {
	    background-size: 100% 100%;
	    margin-right: 123rpx;
	    padding: 2rpx 16rpx 2rpx 16rpx;
	    width: 110rpx;
	    height: 30rpx;
	    background: linear-gradient(90deg, #E2E7EE 0%, #C2C6D8 100%);
	    border-radius: 14rpx 0 14rpx 0;
	}
	
	.text_7 {
	    overflow-wrap: break-word;
	    color: rgba(255, 255, 255, 1);
	    font-size: 20rpx;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 30rpx;
	
	}
	
	.text_8 {
	    overflow-wrap: break-word;
	    color: rgba(161, 160, 160, 1);
	    font-size: 26rpx;
	    font-family: PingFangSC-Medium;
	    font-weight: 700;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 35rpx;
	    /*margin: 0.1rem 0 0 1.1rem;*/
	    padding: 10rpx 0 0 0;
	}
	
	.tag_5 {
	    /*background-color: rgba(238, 238, 238, 1);*/
	    border-radius: 10rpx;
	    margin: 10rpx 0 0 0;
	    /*padding: 0.05rem 37px 0.05rem 37px;*/
	    padding: 10rpx 0 5rpx 0
	}
	
	.text_9 {
	    overflow-wrap: break-word;
	    color: rgba(161, 160, 160, 1);
	    font-size: 30rpx;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 35rpx;
	}
	
	.text-wrapper_2 {
	    /*width: 54px;*/
	    /*width: 85px;*/
	    height: 60rpx;
	    overflow-wrap: break-word;
	    font-size: 0;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: center;
	    line-height: 40rpx;
	    /*margin: 0.2rem 0.55rem 0 1rem;*/
	    padding: 23rpx 0 0 0;
		display: flex;
		justify-content: center;
	}
	
	.text_10 {
	    height: 60rpx;
	    overflow-wrap: break-word;
	    color: rgba(92, 92, 92, 1);
	    font-size: 25rpx;
	    font-family: PingFangSC-Medium;
	    font-weight: 700;
	    text-align: left;
	    line-height: 40rpx;
	}
	
	.text_11 {
	    height: 60rpx;
	    overflow-wrap: break-word;
	    color: rgba(92, 92, 92, 1);
	    font-size: 40rpx;
	    font-family: PingFangSC-Medium;
	    font-weight: 700;
	    text-align: left;
	    white-space: nowrap;
	    line-height: 40rpx;
	}
	
	.section_2 {
	    background-color: rgba(255, 255, 255, 1);
	    border-radius: 15rpx;
	    width: 320rpx;
	    height: 250rpx;
	    border: 2rpx solid rgba(238, 238, 238, 1);
	    /*margin-bottom: 0.3rem;*/
	    margin: 15rpx 15rpx 15rpx 15rpx;
	    padding: 0 0 30rpx 0
	;
	}
	
	
	
	.text_12 {
	    overflow-wrap: break-word;
	    color: rgba(255, 255, 255, 1);
	    font-size: 20rpx;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 30rpx;
	}
	
	.text_13 {
	    overflow-wrap: break-word;
	    color: rgba(51, 51, 51, 1);
	    font-size: 26rpx;
	    font-family: PingFangSC-Medium;
	    font-weight: 700;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 35rpx;
	    /*margin: 0.1rem 0 0 1.1rem;*/
	    padding: 10rpx 0 0 0;
	}
	
	.tag_7 {
	    background-color: rgba(247, 247, 247, 1);
	    border-radius: 4px;
	    margin: 4px 0 0 34px;
	    padding: 0.05rem 28px 0.05rem 28px;
	}
	
	.text_14 {
	    overflow-wrap: break-word;
	    color: rgba(92, 92, 92, 1);
	    font-size: 30rpx;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 35rpx;
	}
	
	.text-wrapper_3 {
	    width: 80px;
	    height: 30px;
	    overflow-wrap: break-word;
	    font-size: 0;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: center;
	    line-height: 20px;
	    margin: 0.2rem 0.225rem 0 43px;
	}
	
	.text_15 {
	    height: 60rpx;
	    overflow-wrap: break-word;
	    color: rgba(227, 59, 59, 1);
	    font-size: 25rpx;
	    font-family: PingFangSC-Medium;
	    font-weight: 700;
	    text-align: left;
	    line-height: 40rpx;
	}
	
	.text_16 {
	    height: 60rpx;
	    overflow-wrap: break-word;
	    color: rgba(227, 59, 59, 1);
	    font-size: 40rpx;
	    font-family: PingFangSC-Medium;
	    font-weight: 700;
	    text-align: left;
	    white-space: nowrap;
	    line-height: 40rpx;
	}
	.text_18 {
	    height: 60rpx;
	    overflow-wrap: break-word;
	    color: black;
	    font-size: 25rpx;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: left;
	    white-space: nowrap;
	    line-height: 40rpx;
		text-decoration:line-through
	}
	
	.section_3 {
	    background-color: rgba(255, 255, 255, 1);
	    border-radius: 6px;
	    width: 166px;
	    height: 134px;
	    border: 0.02rem solid rgba(238, 238, 238, 1);
	    margin: 0 0.3rem 0.3rem 0;
	    padding: 0 33px 24px 0;
	}
	
	
	.text_17 {
	    overflow-wrap: break-word;
	    color: rgba(255, 255, 255, 1);
	    font-size: 0.3rem;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 0.4rem;
	}
	
	
	
	.tag_9 {
	    background-size: 100% 100%;
	    margin-right: 1.75rem;
	    padding: 0.02rem 0.225rem 0.02rem 0.225rem;
	    width: 2.3rem;
	    height: 0.45rem;
	    background: linear-gradient(90deg, #FF8123 0%, #FF4049 61%, #FF4DB4 100%);
	    border-radius: 0.2rem 0 0.2rem 0;
	}
	
	
	
	.text-wrapper_4 {
	    width: 80px;
	    height: 30px;
	    overflow-wrap: break-word;
	    font-size: 0;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: center;
	    line-height: 20px;
	    margin: 0.2rem 0.225rem 0 43px;
	}
	
	.text_20 {
	    height: 30px;
	    overflow-wrap: break-word;
	    color: rgba(227, 59, 59, 1);
	    font-size: 0.35rem;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: left;
	    line-height: 20px;
	}
	
	.text_21 {
	    height: 30px;
	    overflow-wrap: break-word;
	    color: rgba(227, 59, 59, 1);
	    font-size: 0.55rem;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: left;
	    white-space: nowrap;
	    line-height: 20px;
	}
	
	.text_24 {
	    overflow-wrap: break-word;
	    color: rgba(233, 96, 96, 1);
	    font-size: 30rpx;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 35rpx;
	}
	
	.section_4 {
	    background-color: rgba(255, 243, 243, 1);
	    border-radius: 15rpx;
	    width:  320rpx;
	    height: 250rpx;
	    border: 2rpx solid rgba(255, 168, 168, 1);
	    margin: 15rpx 15rpx 15rpx 15rpx;
	    padding: 0 0 30rpx 0;
	}
	
	.tag_10 {
	    background-size: 100% 100%;
	    margin-right: 123rpx;
	    padding: 2rpx 16rpx 2rpx 16rpx;
	    width: 110rpx;
	    height: 30rpx;
	    /*background: linear-gradient(90deg, #FF8123 0%, #FF4049 61%, #FF4DB4 100%);*/
	    border-radius: 14rpx 0 14rpx 0;
	}
	
	.tag_8 {
	    background-size: 100% 100%;
	    margin-right: 123rpx;
	    padding: 2rpx 16rpx 2rpx 16rpx;
	    width: 110rpx;
	    height: 30rpx;
	    background: linear-gradient(90deg, #FF8123 0%, #FF4049 61%, #FF4DB4 100%);
	    border-radius: 14rpx 0 14rpx 0;
	}
	
	.text_22 {
	    overflow-wrap: break-word;
	    color: rgba(255, 255, 255, 1);
	    font-size: 0.3rem;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 0.4rem;
	}
	
	
	
	.tag_11 {
	    /*background-color: rgba(255, 255, 255, 0.7);*/
	    border-radius: 10rpx;
	    margin: 10rpx 0 0 0;
	    /*padding: 0.05rem 34px 0.05rem 33px;*/
	    padding: 10rpx 0 5rpx 0;
	}
	
	
	
	.text-wrapper_5 {
	    width: 1.75rem;
	    height: 30px;
	    overflow-wrap: break-word;
	    font-size: 0;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: center;
	    line-height: 20px;
	    margin: 0.2rem 0.35rem 0 48px;
	}
	
	.text_25 {
	    height: 30px;
	    overflow-wrap: break-word;
	    color: rgba(227, 59, 59, 1);
	    font-size: 0.35rem;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: left;
	    line-height: 20px;
	}
	
	.text_26 {
	    height: 30px;
	    overflow-wrap: break-word;
	    color: rgba(227, 59, 59, 1);
	    font-size: 0.55rem;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: left;
	    white-space: nowrap;
	    line-height: 20px;
	}
	
	.text_27 {
	    height: 30px;
	    overflow-wrap: break-word;
	    color: rgba(227, 59, 59, 1);
	    font-size: 0.35rem;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: left;
	    line-height: 20px;
	}
	
	.section_5 {
	    background-color: rgba(255, 255, 255, 1);
	    border-radius: 6px;
	    width: 166px;
	    height: 134px;
	    border: 0.02rem solid rgba(238, 238, 238, 1);
	    margin: 0 0.3rem 0.3rem 0;
	    padding: 0 33px 24px 0;
	}
	
	
	
	
	
	.text_29 {
	    overflow-wrap: break-word;
	    color: rgba(46, 45, 45, 1);
	    font-size: 0.35rem;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 20px;
	    margin: 4px 0.25rem 0 44px;
	}
	
	.text-wrapper_6 {
	    background-color: rgba(247, 247, 247, 1);
	    border-radius: 4px;
	    margin: 4px 0 0 34px;
	    padding: 0.05rem 28px 0.05rem 28px;
	}
	
	.text_30 {
	    overflow-wrap: break-word;
	    color: rgba(92, 92, 92, 1);
	    font-size: 15px;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 21px;
	}
	
	.text-wrapper_7 {
	    width: 75px;
	    height: 30px;
	    overflow-wrap: break-word;
	    font-size: 0;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: center;
	    line-height: 20px;
	    margin: 0.2rem 0.3rem 0 46px;
	}
	
	.text_31 {
	    height: 30px;
	    overflow-wrap: break-word;
	    color: rgba(227, 59, 59, 1);
	    font-size: 0.35rem;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: left;
	    line-height: 20px;
	}
	
	.text_32 {
	    height: 30px;
	    overflow-wrap: break-word;
	    color: rgba(227, 59, 59, 1);
	    font-size: 0.55rem;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: left;
	    white-space: nowrap;
	    line-height: 20px;
	}
	
	.text_33 {
	    height: 30px;
	    overflow-wrap: break-word;
	    color: rgba(227, 59, 59, 1);
	    font-size: 0.35rem;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: left;
	    line-height: 20px;
	}
	
	.section_6 {
	    width: 4.46rem;
	    height: 3.6rem;
	    background-size: 100% 100%;
	    margin: 0.15rem 0.15rem 0.15rem 0.15rem;
	    /*padding: 0 0.8rem 0.4rem 0;*/
	    background: linear-gradient(180deg, #D9F4F4 0%, #FFF4E0 100%);
	    border-radius: 0.22rem;
	}
	
	.text_34 {
	    overflow-wrap: break-word;
	    color: rgba(46, 45, 45, 1);
	    font-size: 0.5rem;
	    font-family: PingFangSC-Medium;
	    font-weight: 700;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 0.5rem;
	    align-self: center;
	    margin-top:1rem;
	}
	
	.tag_13 {
	    background-color: rgba(255, 255, 255, 1);
	    border-radius: 4px;
	    margin-top: 4px;
	    padding: 0.05rem 29px 0.05rem 29px;
	}
	
	.text_35 {
	    overflow-wrap: break-word;
	    color: rgba(0, 170, 166, 1);
	    font-size: 15px;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 21px;
	}
	
	.text-wrapper_8 {
	    /*width: 90px;*/
	    height: 30px;
	    overflow-wrap: break-word;
	    font-size: 0;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: center;
	    line-height: 20px;
	    align-self: center;
	    margin-top: 0.4rem;
	}
	
	.text_36 {
	    height: 30px;
	    overflow-wrap: break-word;
	    color: rgba(0, 170, 166, 1);
	    font-size: 0.35rem;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    text-align: left;
	    line-height: 20px;
	}
	
	.text_37 {
	    height: 30px;
	    overflow-wrap: break-word;
	    color: rgba(0, 170, 166, 1);
	    font-size: 0.55rem;
	    font-family: PingFangSC-Medium;
	    font-weight: 700;
	    text-align: left;
	    white-space: nowrap;
	    line-height: 20px;
	}
	
	.button_2 {
	    background-image: linear-gradient(
	            150deg,
	            rgba(255, 247, 215, 1) 0,
	            rgba(255, 199, 192, 1) 73.239968%,
	            rgba(246, 188, 255, 1) 100%
	    );
	    border-radius: 24px;
	    margin: 50rpx 0 0 0;
	    padding: 20rpx 25rpx 20rpx 25rpx;
	}
	
	.text_38 {
	    overflow-wrap: break-word;
	    color: rgba(168, 47, 37, 1);
	    font-size: 30rpx;
	    font-family: PingFangSC-Medium;
	    font-weight: 700;
	    text-align: center;
	    white-space: nowrap;
	    /* line-height: 25px; */
	}
	
	.text-wrapper_9 {
	    width: 100%;
	    /*height: 144px;*/
	    height:auto;
	    overflow-wrap: break-word;
	    font-size: 0;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: left;
	    line-height: 35rpx;
	    margin: 40rpx 0 0 2rpx;
	}
	
	.text_39 {
	  /*  width: 100%;
	    height: 3.6rem; */
	    overflow-wrap: break-word;
	    color: rgba(92, 92, 92, 1);
	    font-size: 25rpx;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: left;
	    line-height: 40rpx;
	}
	
	.paragraph_1 {
	    width: 100%;
	    height: 250rpx;
	    overflow-wrap: break-word;
	    color: rgba(153, 153, 153, 1);
	    font-size: 20rpx;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: left;
	    line-height: 35rpx;
	}
	
	.text_40 {
	  /*  width: 345px;
	    height: 144px; */
	    overflow-wrap: break-word;
	    color: rgba(0, 170, 166, 1);
	    font-size: 25rpx;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: left;
	    line-height: 40rpx;
	}
	
	.image_2 {
	    width: 375px;
	    height: 34px;
	    margin-top: -0.02rem;
	}
	.group_2 {
	    position: relative;
	    background-size: 100% 100%;
	    padding: 10rpx 0 50rpx 30rpx 
	}
	.block_7 {
	    height: 10rpx;
	    width: 150rpx;
	    background: linear-gradient(270deg, #54D6D2 0%, #00AAA6 100%);opacity: 0.8;
	    background-size: 100% 100%;
	    align-self: center;
	    margin: 90rpx 0 10rpx -30rpx;
	}
	
	.paragraph_2 {
	    width: 520rpx;
	    height: 500rpx;
	    overflow-wrap: break-word;
	    color: rgba(46, 45, 45, 1);
	    font-size: 27rpx;
	    font-family: PingFangSC-Regular;
	    font-weight: NaN;
	    text-align: left;
	    line-height: 40rpx;
	    margin-top: 20rpx;
	}
	
	.text_41 {
	    position: absolute;
	    left: 215rpx;
	    top:  60rpx;
	    overflow-wrap: break-word;
	    color: rgba(46, 45, 45, 1);
	    font-size:  30rpx;
	    font-family: PingFangSC-Medium;
	    font-weight: 700;
	    text-align: right;
	    white-space: nowrap;
	    line-height: 45rpx;
	}
	.block_6 {
	    background:rgba(0, 0, 0, 0.6);
	    background-size: 100% 100%;
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    left: 0;
	    top: 0;
	    /*padding: 5rem 1rem 5.1rem 1rem;*/
	}
</style>
